.header-search-box {
    width: 100vw;
    height: 13.33vw;
    padding: 3.2vw 3.2vw 1.6vw 3.2vw;
    background-color: #fff;


    .search-input {
        width: 93.6vw;
        height: 8.53vw;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        border-radius: 6.67vw;
        box-shadow: 0 0.53vw 1.07vw rgba(0, 0, 0, 0.1);
        border: 0.53vw solid #0086F6;


        i {
            display: block;
            width: 5.33vw;
            height: 5.33vw;
            margin-left: 2.67vw;
            margin-right: 1.33vw;
        }

        a {
            cursor: text;

            span {
                display: block;
                width: 53.33vw;
                height: 5.6vw;
                line-height: 5.6vw;
            }
        }
    }
}

.main-nav {
    width: 100vw;
    height: 49.07vw;
    padding: 1.6vw 3.2vw 0.53vw 3.2vw;
    display: flex;
    flex-direction: row;

    ul {
        display: flex;
        flex: 1;
        flex-direction: column;
        margin-left: 0.27vw;

        &:nth-child(1) {
            margin-left: 0;

            li {
                background-color: #FFF5F1;

                &:first-child {
                    border-top-left-radius: 2.13vw;
                    background-image: linear-gradient(180deg, #FA5956 0%, #FB8650 100%)
                }

                &:last-child {
                    border-bottom-left-radius: 2.13vw;

                }
            }
        }

        &:nth-child(2) {
            li {
                background-color: #EFF9FF;

                &:first-child {
                    background-image: linear-gradient(180deg, #3C83FA 0%, #50B2FA 100%)
                }
            }
        }

        &:nth-child(3) {
            li {
                background-color: #F2F5FF;

                &:first-child {
                    background-image: linear-gradient(0deg, #66a4ff 0%, #5e80ff 100%);
                }
            }
        }

        &:nth-child(4) {
            li {
                background-color: #ECFCF8;

                &:first-child {
                    background-image: linear-gradient(180deg, #2fc3b6 0%, #52d9b3 100%);
                }
            }
        }

        &:last-child {
            li {
                background-color: #FFF9F2;

                &:first-child {
                    border-top-right-radius: 2.13vw;
                    background-image: linear-gradient(0deg, #ffa846 0%, #ff8939 99%);
                }

                &:last-child {
                    border-bottom-right-radius: 2.13vw;
                }
            }
        }

        li {
            width: 100%;
            height: 15.47vw;
            font-size: 3.2vw;
            line-height: 4vw;
            text-align: center;

            &:first-child {
                margin-bottom: 0.27vw;
            }

            &:nth-child(3) {
                margin-top: 0.27vw;
            }

            a {
                display: flex;
                height: 100%;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                color: #333;

                span {
                    display: block;
                }

                .nav-icon {
                    width: 7.47vw;
                    height: 7.47vw;
                    margin-bottom: 1.07vw;
                    background-size: 7.47vw auto;
                    background-repeat: no-repeat;
                }

                .icon1 {
                    background-image: url(../images/酒店.png);
                }

                .icon2 {
                    background-image: url(../images/客栈.png);
                }

                .icon3 {
                    background-image: url(../images/美食.png);
                }

                .icon4 {
                    background-image: url(../images/机票.png);
                }

                .icon5 {
                    background-image: url(../images/航班助手.png);
                }

                .icon6 {
                    background-image: url(../images/包车.png);
                }

                .icon7 {
                    background-image: url(../images/火车票.png);
                }

                .icon8 {
                    background-image: url(../images/汽车.png);
                }

                .icon9 {
                    background-image: url(../images/租车.png);
                }

                .icon10 {
                    background-image: url(../images/旅游.png);
                }

                .icon11 {
                    background-image: url(../images/门票.png);
                }

                .icon12 {
                    background-image: url(../images/周边游.png);
                }

                .icon13 {
                    background-image: url(../images/攻略.png);
                }

                .icon14 {
                    background-image: url(../images/购物.png);
                }

                .icon15 {
                    background-image: url(../images/借钱.png);
                }
            }
        }
    }
}

.nav-switch {
    width: 100%;
    height: 5.33vw;
    background-image: linear-gradient(0deg, #f4f4f4 0%, #ffffff 100%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 1.07vw;

    span {
        width: 1.07vw;
        height: 1.07vw;
        border-radius: 0.53vw;
        background-color: #ccc;

        &:first-child {
            margin-right: 1.07vw;
            width: 3.73vw;
            background-color: #0086f6;
        }

    }
}

.sec-banner {
    width: 100vw;
    height: 39.47vw;
    display: flex;
    background: #f4f4f4;
    padding: 0 3.2vw;
    /* margin-left: -2.13vw; */
    margin-bottom: 2.67vw;

    .left-banner {
        /* width: 45.6vw; */
        width: 50%;
        height: 39.47vw;
        position: relative;
        flex: 1;
        padding: 2.13vw;
        /* margin-left: 2.13vw; */
        border-radius: 2.13vw;
        background-color: #fff;
        overflow: hidden;

        .block-header {
            display: flex;
            height: 5.33vw;
            margin-bottom: 1.6vw;
            justify-content: space-between;
            align-items: center;

            img {
                width: 19.47vw;
                height: 5.33vw;
            }

            span {
                height: 4.27vw;
                line-height: 4.27vw;
                border-radius: 0.53vw;
                font-size: 2.67vw;
                background-color: #ffebe3;
                color: #ff4607;
                padding: 0.27vw 1.07vw;
                white-space: nowrap;
            }
        }

        .slider {
            /* overflow-x: hidden; */
            width: 41.33vw;
            height: 28.27vw;
            border-top-left-radius: 1.6vw;
            border-top-right-radius: 1.6vw;
            /* overflow: hidden; */

            .slider-content {
                /* flex-direction: row; */
                /* transition: transform 0.35s cubic-bezier(0.15, 0.3, 0.25, 1); */
                /* display: flex;
                will-change: transform;
                border-top-left-radius: 1.6vw;
                transform: translate(200%, 0);
                direction: ltr; */

                .slider-details {
                    /* width: 100%; */
                    flex-shrink: 0;
                    overflow: auto;

                    .block-img {
                        position: relative;
                        height: 22.4vw;
                        margin-bottom: 1.07vw;
                        border-radius: 1.6vw;
                        overflow: hidden;

                        span {
                            position: absolute;
                            z-index: 9;
                            top: 0;
                            left: 0;
                            height: 3.73vw;
                            line-height: 3.73vw;
                            padding: 0 0.8vw;
                            background-color: rgba(51, 51, 51, .8);
                            border-radius: 1.6vw 0 1.6vw 0;
                            font-size: 2.67vw;
                            color: #fff;
                        }

                        img {
                            position: absolute;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 100%;
                            height: auto;

                        }

                        .mask {
                            position: absolute;
                            top: 11.2vw;
                            height: 11.2vw;
                            width: 100%;
                            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 2%, rgba(0, 0, 0, 0) 100%);
                        }

                        .product {
                            overflow: hidden;
                            position: absolute;
                            bottom: 1.6vw;
                            left: 1.6vw;
                            right: 1.6vw;
                            border-radius: 0 1.6vw 0 1.6vw;
                            font-size: 2.93vw;
                            line-height: 3.2vw;
                            font-weight: bold;
                            color: #fff;
                        }
                    }

                    .block-footer {
                        margin-top: 1.07vw;
                        height: 4.8vw;
                        line-height: 4.8vw;
                        overflow: hidden;

                        .priceWrap {
                            float: left;
                            margin-right: 1.07vw;
                            height: 4.8vw;
                            line-height: 4.8vw;
                            vertical-align: middle;

                            .price {
                                float: left;
                                height: 4.8vw;
                                line-height: 4.8vw;
                                font-size: 4.27vw;
                                font-weight: bold;
                                color: #f60;
                                padding-right: 0.53vw;

                                i.symbol {
                                    font-style: normal;
                                    font-size: 2.93vw;
                                    color: #f60;
                                    line-height: 1.1;
                                }
                            }

                            .original-price {
                                /* float: left; */
                                font-size: 2.67vw;
                                margin-right: 1.07vw;
                                /* height: 4.8vw; */
                                line-height: 1.1;
                                color: #666;
                                /* vertical-align: middle; */
                            }
                        }
                    }
                }
            }
        }

        .switch-banner {
            position: absolute;
            top: 10.67vw;
            left: 2.67vw;
            display: flex;
            flex-direction: row;
            justify-content: center;

            .switch-item {
                width: 1.07vw;
                height: 1.07vw;
                background-color: rgba(255, 255, 255, .4);
                border-radius: 0.53vw;
                margin-right: 1.07vw;
            }

            .switch-item.active {
                width: 3.73vw;
                background-color: #fff;
            }
        }
    }

    .right-banner {
        position: relative;
        flex: 1;
        width: 50%;
        padding: 2.13vw;
        margin-left: 2.13vw;
        border-radius: 2.13vw;
        background-color: #fff;
        overflow: hidden;

        .block-header {
            display: flex;
            height: 5.33vw;
            margin-bottom: 1.6vw;
            justify-content: space-between;
            align-items: center;

            img {
                width: 19.47vw;
                height: 5.33vw;
            }

            .slogan {
                height: 4.27vw;
                border-radius: 0.53vw;
                background-color: #fdefd2;
                font-size: 2.67vw;
                color: #ae6e15;
                line-height: 4.27vw;
                padding: 0.27vw 1.07vw;
                white-space: nowrap;
            }
        }

        .rank {
            position: relative;
            display: flex;
            flex-direction: row;

            .rank-item {
                flex: 1;
                border-top-left-radius: 2.13vw;
                border-top-right-radius: 2.13vw;
                box-sizing: border-box;
                overflow: hidden;

                &:first-child {
                    margin-right: 0.53vw;
                }

                &:last-child {
                    margin-left: 0.53vw;
                }

                &:only-child {
                    margin: 0;
                }

                .block-img {
                    position: relative;
                    height: 22.4vw;
                    border-radius: 1.6vw;
                    overflow: hidden;

                    img {
                        position: absolute;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 100%;
                        height: 22.4vw;
                    }

                    .tag {
                        position: absolute;
                        top: 0;
                        left: 0;
                        height: 3.73vw;
                        line-height: 3.73vw;
                        padding: 0 0.8vw;
                        background-image: linear-gradient(270deg, #f8e1bd 0%, #e2c089 100%);
                        border-radius: 1.6vw 0 1.6vw 0;
                        font-size: 2.67vw;
                        color: #663c00;

                    }
                }

                .block-footer {
                    display: flex;
                    align-items: center;
                    margin-top: 1.6vw;

                    .rank-title {
                        /* text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden; */
                        font-size: 2.93vw;
                        color: #333;
                        line-height: 1.1;
                    }
                }
            }
        }
    }
}

.ad-banner {
    width: 100vw;
    height: 26.67vw;
    margin-top: 2.67vw;
    padding: 0 3.2vw 3.2vw;
    overflow: hidden;
    background-color: #f4f4f4;

    .ad-content {
        border-radius: 2.13vw;
        width: 93.6vw;
        height: 23.47vw;
        position: relative;

        cursor: pointer;

        .banner-flag {
            width: 100%;
            height: 100%;
            position: relative;

            .banner-img {
                width: 100%;
                height: 100%;
                position: relative;
                cursor: pointer;
                overflow: hidden;

                img {
                    left: 0;
                    top: 0;
                    position: absolute;
                    width: 100%;
                    display: block;
                    height: 23.47vw;
                    border-radius: 2.13vw;
                    box-shadow: rgba(0, 0, 0, 0.1) 0 0 0 0;
                }
            }
        }
    }
}

.footer-box {
    width: 100vw;
    height: 32vw;
    padding-top: 3.2vw;
    padding-bottom: 13.33vw;

    .group {
        display: flex;
        justify-content: space-around;
        margin: 0 3.2vw;

        a {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 8vw;
            border: 0.27vw solid #999;
            border-radius: 1.07vw;
            min-width: 26.67vw;

            span {
                font-size: 3.47vw;
                text-align: center;
                line-height: 4.53vw;
                margin-right: 1.07vw;
                color: #333;
            }


        }
    }

    .ver {
        text-align: center;
        font-size: 3.2vw;
        line-height: 4vw;
        margin-top: 3.47vw;

        a {
            color: #666;

            &:first-child::after {
                content: "";
                margin-right: 6.4vw;
                padding-right: 6.4vw;
                background-position: center right;
                background-image: linear-gradient(to right, transparent 50%, #ccc 50%);
                background-repeat: no-repeat;
                background-size: 0.27vw 100%;
            }
        }

        p {
            margin-top: 4.27vw;
            font-size: 2.67vw;
            color: #666;
            letter-spacing: 0;
            text-align: center;
            line-height: 3.2vw;

            span {
                margin-left: 1.6vw;
            }
        }
    }
}

.tabbar {
    position: fixed;
    box-shadow: 0 -1.33vw 4vw rgba(0, 0, 0, .05);
    bottom: 0;
    left: 0;
    right: 0;
    height: 13.07vw;
    background-color: #fff;
    max-width: 144vw;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;

    a {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding-bottom: 1.33vw;
        color: #666;
        font-size: 2.93vw;
        line-height: 3.2vw;
        margin-top: 0.27vw;

        span:first-child {
            width: 8.53vw;
            height: 8.53vw;
            background-size: 8.53vw auto;
            background-image: url(../images/nav-tabbar.png);
        }

        .icon-home {
            background-position: 0 0;
        }

        .icon-community {
            background-position: 0 -8.53vw;
        }

        .icon-message {
            background-position: 0 -17.07vw;
        }

        .icon-mine {
            background-position: 0 -25.6vw;
        }
    }
}

.fixed-icon {
    width: 20.27vw;
    height: 20.27vw;
    background-size: 20.27vw;
    background-image: url(../images/sign.png);
    position: fixed;
    right: 0;
    bottom: 14.67vw;
}